<template>
  <div class="flex_aic_jcsb">
    <div class="flex_aic">
      <el-image
        style="width: 82px; height: 82px"
        :src="row.skuCoverImage"
        alt=""
        fit="cover"
      />
      <div class="ml8">
        <!-- 商品id -->
        <div class="fs-14">{{ row.skuId }}</div>
        <!-- 商品名称 -->
        <div class="fs-14">{{ row["skuName" + locale] }}</div>
        <!-- 商品规格 -->
        <div
          class="fs-12 color-999999"
          v-if="row.skuSpecDetail?.['specDetailName' + locale]"
        >
          {{ $t("orderTable.规格") }}：{{
            row.skuSpecDetail["specDetailName" + locale]
          }}
        </div>
        <!-- 商品属性 -->
        <div class="fs-12 color-999999" v-if="row.skuAttrDetail?.length">
          {{ $t("orderTable.属性") }}：{{
            row.skuAttrDetail
              .map(
                (v) =>
                  `${v["attrName" + locale]}:${v["attrDetailName" + locale]}`
              )
              .join(",")
          }}
        </div>
        <!-- 商品加料 -->
        <div class="fs-12 color-999999" v-if="row.skuMateDetail?.length">
          {{ $t("orderTable.加料") }}：{{
            row.skuMateDetail.map((v) => `${v["mateName" + locale]}`).join(",")
          }}
        </div>
        <!-- 商品分类 -->
        <span class="color-999999" v-if="row['skuClassify1Name' + locale]">
          {{ $t("orderTable.分类") }}：{{ row["skuClassify1Name" + locale] }}
        </span>
      </div>
    </div>
    <div class="text-right mr12">
      <!-- 单价 -->
      <div>{{ $t("currency.￥") + row.payRealSku }}</div>
      <!-- 购买数量 -->
      <div>x{{ row.skuCount }}</div>
      <!-- 打包费 -->
      <div>{{$t("goods_list.包装费")}}：{{ $t("currency.￥") + row.skuPackingFee }}</div>
    </div>
  </div>
</template>
<script setup>
import { useI18n } from "vue-i18n";

const { locale, t } = useI18n();
const props = defineProps({
  row: {
    type: Object,
    default: () => {},
  },
});

</script>
<style lang="scss" scoped></style>
